<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form
        v-if="pageMode === PAGE_MODE_NORMAL"
        :inline="true"
        :model="listQuery"
        class="filter-container"
      >
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="listQuery.orderType"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="搜索条件">
          <el-select
            v-model="keywordField"
            size="mini"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in conditionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="keyword" size="mini" style="width: 120px" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="listQuery.datetimeRange"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="mini"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getList"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="list"
        align="center"
        highlight-current-row
        default-expand-all
        max-height="600"
        header-cell-class-name="custome-el-table-header-cell2"
        cell-class-name="custome-el-table-cell2"
      >
        <el-table-column label="状态" width="100px" fixed="left">
          <template slot-scope="{ row }">
            <el-tag
              :type="
                row.status === STATUS_CHECKED
                  ? 'success'
                  : row.status === STATUS_CANCELED
                  ? 'danger'
                  : 'warning'
              "
            >
              {{ formatByKeyValue(statusOptions, row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="任务单号"
          prop="manufactureTaskCode"
          width="140px"
          fixed="left"
        />
        <el-table-column
          label="通知单号"
          prop="manufactureOrderCode"
          width="150px"
          fixed="left"
        >
          <template slot-scope="{ row }">
            <router-link
              target="_blank"
              :to="{
                path: '/manufacture_order',
                query: { code: row.manufactureOrderCode }
              }"
            >
              <el-button type="text">{{ row.manufactureOrderCode }}</el-button>
            </router-link>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="来源单号"
          prop="sourceOrderCode"
          width="200px"
          fixed="left"
        /> -->
        <el-table-column label="类型" width="100px" fixed="left">
          <template slot-scope="{ row }">
            {{ formatByKeyValue(orderTypeOptions, row.orderType) }}
          </template>
        </el-table-column>
        <el-table-column type="expand" width="20" fixed="left">
          <template slot-scope="{ row }">
            <div v-if="row.goodsList && row.goodsList.length > 0">
              <el-table
                :data="row.goodsList"
                border
                style="width: 1402px"
                header-cell-class-name="custome-el-table-header-cell"
                cell-class-name="custome-el-table-cell"
              >
                <el-table-column
                  label="识别码"
                  prop="goodsFullCode"
                  width="150px"
                  align="center"
                />
                <el-table-column
                  label="货品简称"
                  prop="goodsAbbr"
                  width="150px"
                  align="center"
                />
                <el-table-column
                  label="货号"
                  prop="goodsCode"
                  width="200px"
                  align="center"
                />
                <el-table-column
                  label="批号"
                  prop="goodsBatchCode"
                  width="150px"
                  align="center"
                />
                <el-table-column
                  label="失效日期"
                  prop="expirationDate"
                  width="100px"
                  align="center"
                />
                <el-table-column label="清点个数" width="100px" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.factCount }}
                  </template>
                </el-table-column>
                <el-table-column label="清点数量" width="100px" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.factQuantity > 0">
                      <i class="brand-color">{{ scope.row.factQuantity }}</i>
                      {{ scope.row.unit }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="重量" width="100px" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.factQuantity > 0">
                      <i class="brand-color">{{ scope.row.weight }}</i>
                      {{ scope.row.weightUnit }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="memo" min-width="200px" />
        <el-table-column label="清点人" prop="createUserName" width="100px" />
        <el-table-column label="开始时间" prop="createTime" width="160px" />
        <el-table-column label="完成时间" prop="finishTime" width="160px" />
        <el-table-column label="持续" width="150px">
          <template slot-scope="{ row }">
            {{
              (
                (row.finishTime === null
                  ? new Date() - new Date(row.createTime)
                  : new Date(row.finishTime) - new Date(row.createTime)) /
                1000 /
                60
              ).toFixed(0)
            }}
            分
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80px" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="view(row)">
                  查看
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="pageMode === PAGE_MODE_NORMAL && total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>
    <ViewOrder
      :visible.sync="viewVisible"
      :current-row="currentRow"
      :status-options="taskStatusOptions"
      :tag-options="manufactureOrderTagOptions"
      :unit-options="manufactureOrderUnitOptions"
    />
  </div>
</template>

<script>
import {
  getBeginDay,
  getEndDay,
  getTimePickerShortcuts,
  formatByKeyValue,
  formatTime
} from '@/utils'
import { pageManufactureTask } from '@/api/mes/manufactureTask.js'
import { orderListPreOptions } from '@/api/mes/manufactureOrder'

import Pagination from '@/components/Pagination'
import ViewOrder from '@/views/manufacture/order/components/viewOrder.vue'

export default {
  components: {
    Pagination,
    ViewOrder
  },
  data() {
    return {
      PAGE_MODE_NORMAL: 'normal',
      pageMode: 'normal',
      STATUS_CANCELED: 0,
      STATUS_CHECKING: 10,
      STATUS_CHECKED: 20,
      statusOptions: null,
      orderTypeOptions: null,
      handOverResultOptions: null,
      acceptanceOrderTagOptions: null,
      goodsDeliveryOptions: null,
      weightUnitOptions: null,
      concentrationUnitOptions: null,
      goodsShapeOptions: null,
      warehouseOptions: null,
      conditionOptions: [
        { value: 'acceptanceOrderCode', label: '通知单号' },
        { value: 'sourceOrderCode', label: '来源单号' }
      ],
      pickerOptions: {
        shortcuts: getTimePickerShortcuts()
      },
      listLoading: false,
      total: 0,
      list: [],
      keywordField: null,
      keyword: null,
      datetimeRange: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        datetimeRange: [],
        withGoodsFlag: true
      },
      currentRow: null,
      rows: [],
      saveDialogVisible: false,
      handOverDialogVisible: false,
      multipleSelection: [],
      saveManufactureDialogVisible: false,
      saveManufactureDialogVisibleStatus: 'view',
      manufactureResultGoodsList: null,
      manufactureOrderUnitOptions: [],
      manufactureOrderTagOptions: [],
      taskStatusOptions: [],
      viewVisible: false
    }
  },
  mounted() {
    this.listQuery.datetimeRange.push(getBeginDay(0))
    this.listQuery.datetimeRange.push(getEndDay(0))
    orderListPreOptions().then((response) => {
      const data = response.data
      this.statusOptions = data.orderStatus
      this.manufactureOrderUnitOptions = data.weightUnit
      this.taskStatusOptions = data.taskStatus
      this.manufactureOrderTagOptions = data.manufactureOrderTag
      this.orderTypeOptions=data.orderType
      this.getList()
    })
  },
  methods: {
    formatByKeyValue,
    formatTime,
    getList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      this.listLoading = true
      pageManufactureTask(this.listQuery)
        .then((response) => {
          const data = response.data
          this.total = data.total
          this.list = data.rows
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleSearch() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    view(row) {
      console.log(row)
      this.orderType = row.orderType
      this.currentRow = []
      this.saveManufactureDialogVisibleStatus = 'view'
      this.viewVisible = true
      this.currentRow = row
    },
    handleSaveManufactureOrder() {
      this.handleFilter()
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
